import React from 'react';
import styles from './index.less';
import { Link, useModel } from 'umi';
import { MenuDataItem } from '@ant-design/pro-layout';
import IconFont from '@/components/IconFont';
import classnames from 'classnames';

const MenuItemRender = (menuItemProps: MenuDataItem, defaultDom: React.ReactNode) => {
  if (menuItemProps.isUrl) {
    return defaultDom;
  }
  const { initialState } = useModel('@@initialState');
  const style = !initialState?.collapsed ? { paddingLeft: '18px' } : undefined;
  return (
    <Link
      to={
        menuItemProps?.component
          ? {
              pathname: menuItemProps.path,
              state: { id: menuItemProps.id },
            }
          : '#'
      }
      style={style}
      className={classnames(
        styles['item'],
        menuItemProps.path === '/entry/index' && styles['index'],
      )}
    >
      {menuItemProps.iconUrl && (
        <IconFont type={menuItemProps.iconUrl} className={styles['menu-item-icon']} />
      )}
      <span className={styles['menu-item-title']}>{defaultDom}</span>
    </Link>
  );
};
export default MenuItemRender;
